<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/css/base.css">
    <style>
        .box {
            width: 300px;
            height: 100px;
            background-color: burlywood;
            transition: all 5s ease;
        }
        .box1{
            width: 300px;
            height: 100px;
            background-color: rebeccapurple;
            transition: all 1s ease;
        }
        .show{
            opacity: 1;
            width: 300px;
            height: 100px;
            background-color: burlywood;
        }
        .active{
            transition: all 4s ease;
        }
        .hide{
            opacity: 0;
            width: 0px;
            height: 0px;
            background-color: royalblue;
        }
    </style>
</head>

<body>
    <div id="app">
        <pre v-pre class="note">
        动画效果定义:
            + css动画定义:针对样式变化的线性动画【能够通过代码准确识别动画开始时间和结束时间的，具有固定规律的动画】
            + js动画定义:针对业务逻辑的动画【有JS业务逻辑控制，无法通过代码阅读方式准确描述出动画开始是和结束时间】

        过渡效果组件(js动画)：为页面的元素基于vue语法的变化提供动画执行效果
                             可以自动识别元素被vue语法操作时对应的延迟时间，
                             并基于设置的css动画配合vue语法操作完成元素的过渡效果执行
        
        过渡效果组件对于动画的操作：
            页面首次加载动画(开启属性appear): 可以通过 appearFromClass appearActiveClass appearToClass 自定义，也可以不定义；
                                            如果不定义默认使用进入动画
            进入(显示)动画: 进入前样式 -> 切换动画过程样式 -> 进入后样式
            离开(隐藏)动画: 离开前样式 -> 切换动画过程样式 -> 离开后样式
        
        transition 组件只能针对单一元素进行动画操作
        transition-group 组件可以针对多个元素进行动画操作 => 该组件内部的所有元素在进行动画样式操作时必须提供唯一key值

        详细属性和事件配置参考官方文档 https://cn.vuejs.org/api/built-in-components.html#transition
            
        </pre>
        <input type="button" value="v-show控制显示隐藏" @click=" isShow=!isShow "> <br><br>
        <div v-show="isShow" class="box" :style=" `opacity: ${isShow?1:0};` "></div> <br>

        <input type="button" value="v-show控制显示隐藏" @click=" changeShow() "> <br><br>
        <div v-show="isShowA" class="box" :style=" `opacity: ${opacity};` "></div> <br>

        <input type="button" value="v-show控制显示隐藏" @click=" isShowB=!isShowB "> <br><br>
        <!-- <transition
            enter-from-class="hide" enter-active-class="active" enter-to-class="show"
            leave-from-class="show" leave-active-class="active" leave-to-class="hide"
        >
            <div v-show="isShowB" class="box"></div>
        </transition> -->
        <!-- <transition
            enter-from-class="hide"
            leave-to-class="hide"
        >
            <div v-show="isShowB" class="box">box</div>
        </transition> -->

        <transition-group
            enter-from-class="hide"
            leave-to-class="hide"
            :appear="true"
        >
            <div v-show="isShowB" class="box" key="c1">box</div>
            <div v-show="!isShowB" class="box1" key="c2">box1</div>

        </transition-group>
    </div>
    <script type="module">
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        createApp({
            data() {
                return {
                    isShow: false,
                    isShowA: false,
                    opacity: 0,
                    isShowB:false
                }
            },
            methods: {
                changeShow() {
                    if (this.opacity == 0) {
                        this.isShowA = true;
                        // this.opacity = 1;
                        setTimeout(() => {
                            this.opacity = 1;
                        }, 50);
                    } else {
                        this.opacity = 0;
                        setTimeout(() => {
                            this.isShowA = !this.isShowA;
                        }, 1000);
                    }
                }
            },
        }).mount("#app");
    </script>
</body>

</html>